<template>
  <div>
    当前最新的count值为{{count}}
    <el-button @click="add">+1</el-button>
    {{num}}
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      //   count: ''
    }
  },
  created() {
    // this.getCount()
  },
  methods: {
    // 通过mapMutations 获取store中映射的函数
    ...mapMutations(['addCount']),
    getCount() {
      this.count = this.$store.state.count
    },
    // 点击按钮，触发映射的函数，或者直接调用 commit
    add() {
      this.$store.commit('addCount', 1)

      //   console.log('开始了啊')
      //   this.addCount(10)
      //   console.log(this.count)
      //   console.log('我执行晚了')

      // 异步执行代码
      //   console.log('开始执行')
      //   this.$store.dispatch('addAsync', 4)
      //   console.log(this.count)
      //   console.log('结束执行')
    }
  },
  computed: {
    ...mapState(['count', 'num'])
  }
}
</script>
<style lang="less" scoped>
</style>
